<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<!-- 创建vue流程 beforeCreate created -->
		<!-- 挂载模板流程 beforeMount mounted -->
		<!-- 数据更新流程 beforeUpdate updated -->
		<!-- 销毁流程 beforeDestroy destroyed -->

		<!-- vm的一生(m的生命周期)∶
			将要创建===>调用beforeCreate函数。
			创建完毕===>调用created函数。
			将要挂载===>调用beforeMount函数。
			(重要）挂载完毕===>调用mounted幽数。======:=======>【重要的钩子】
			将要更新===>调用beforeUpdate函数。
			更新完毕===>调用updated函数。
			(重要）将要销毁===>调用beforeDestroy函数。========>【重要的钩子】
			销毁完毕===>调用destroyed函数。 -->

		<div id="app">
			<h2>小光同志+{{n}}</h2>
			<button @click="add">n++</button>
			<button @click="bye">销毁vm</button>
		</div>
		<script src="../vue.js"></script>
		<script>
			var app = new Vue({
				//el: '#app', //Id #id class .name  标签 div
				//输出的数据
				data: function() {
					return {
						n: 0
					}
				},
				methods: {

					bye() {
						this.$destroy();
						console.log("bye")
					},
					add() {
						console.log("add")
						this.n++
					},
				},
				beforeCreate() {
					//初始化:生命周期、事件，但数据代理还未开始。
					//此时:无法通过vm访问到data中的数据、methods中的方法。
					console.log("beforeCreate")
					//debugger; //断点
				},
				created() {
					//初始化:数据监测、数据代理。
					//此时:可以通过vm访问到data中的数据、methods中配置的方法。
					console.log("created")
				},
				beforeMount() {
					// 此时:
					// 1.页面呈现的是未经Vue编译的DOM结构。
					// 2.所有对DOM的操作，最终都不奏效。
					console.log("beforeMount")
				},
				mounted() {
					// 此时:
					// 1.页面中呈现的是经过Vue编译的DOM.
					// 2.对DOM的操作均有效(尽可能避免)。至此初始化过程结束，
					// 一般在此进行:开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。
					console.log("mounted")
				},
				beforeUpdate() {
					//此时:数据是新的，但页面是旧的，即:页面尚未和数据保持同步。
					console.log("beforeUpdate");
				},
				updated() {
					//此时:数据是新的，页面也是新的，即:页面和数据保持同步。
					console.log("beforeUpdate")
				},
				beforeDestroy() {
					//此时: vm中所有的: data、methods、指令等等，都处于可用状态，马上要执行销毁过程,
					//-般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件等收尾操作
					console.log("beforeDestroy")
				},
				destroyed() {
					//销毁vue 后
					console.log("destroyed")
				}

				//template:`<div><h2>小光同志+{{n}}</h2><h2>小光同志+{{n}}</h2></div>`//要有一个根组件
			});
			app.$mount("#app"); //控制台输出
		</script>
	</body>
</html>
